<template>
  <div :class="{'mobile-subscribe': showMobilePage}" class="app-container subscribe-list-wrap">
    <div :class="{'is-mobile': showMobilePage}" class="subcribe">
      <div class="subcribe-left">
        <div class="subscribe-header">
          <div class="header-form">
            <el-select v-model="subcribeType" :popper-append-to-body="false" placeholder="全部" @change="typeChange">
              <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value "
                size="small"
              >
                <div class="flex-center">
                  <div :class="{'ad':item.value===1,'custom':item.value===2}" class="option-item"/>
                  <span class="f14">{{ item.label }}</span>
                </div>
              </el-option>
            </el-select>
            <div style="flex:1"/>
            <div :style="showMobilePage?{marginTop: '10px'}:''" class="btn-wrap">
              <el-button class="clear-btn" type="info" @click="clearSelectResourceList">清空</el-button>
              <el-button class="person-btn" plain @click="searchPersonSubcribeList">个人预约</el-button>
              <el-button class="search-btn" type="primary" plain @click="searchSubcribeList">搜索预约</el-button>
            </div>
          </div>
          <div class="at-present">
            <span class="present-label">{{ reverseTableSelectList.length > 0 ? '当前展示' : '当前展示：' }}</span>
            <div v-if="reverseTableSelectList.length > 0" class="present-content">
              <resource-tag v-for="item in reverseTableSelectList" :key="item.id" :item="item" @close="handleResourceClose">
                <resource-info
                  :resource-name="item.resourceName"
                  :account-name-organization="item.accountNameOrganization"
                  :resource-id="item.resourceId"
                  :account-name-platform="item.platformTypeName"
                  :is-show-resource-id="false"
                  account-belong-name="none"
                />
              </resource-tag>
            </div>
            <span v-else class="present-label other-color">所有资源</span>
          </div>
        </div>
        <div class="subcribe-container">
          <subcribe-calendar
            :options="calendarArr"
            :statistics="subcribeStatistics"
            :is-mobile="showMobilePage"
            class="calendar"
            @handleSomeDay="handleSomeDay"
            @handlePickDate="handlePickDate"
            @handleToday="handleToday"
          >
            <div slot-scope="data">
              <!-- <div v-for="(item) in getCalendarItem(data.time.day)" :key="item.id">{{ item.name }}</div> -->
              <calendar-item :items="getCalendarItem(data.time.day)" :time="data.time" @checkList="checkSubList" />
            </div>
          </subcribe-calendar>
        </div>
      </div>
      <div :class="{'mobile-subscribe-right': showMobilePage}" class="subcribe-right">
        <ResourceList
          :resource-list="resourceList"
          :resource-list-loading="resourceListLoading"
          :allchecked="allchecked"
          :indeterminate="indeterminate"
          :select-resource-ids="selectResourceIds"
          :resource-platforms="resourcePlatforms"
          :account-belongs="accountBelongs"
          :dept-tree-list="deptTreeList"
          :query-form="queryForm"
          :default-proposer-list="defaultProposerList"
          user-select-class-name="userSelect1"
          @queryEmpty="queryEmpty"
          @queryClick="queryClick"
          @update:queryForm="updateQueryForm"
          @isChecked="isChecked"
          @updateAllSelected="updateAllSelected"
          @checkboxClick="checkboxClick"
          @createSubcribe="createSubcribe"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>
    </div>
    <el-drawer
      v-if="!showMobilePage"
      :visible.sync="drawer"
      :with-header="false"
      size="300px"
      title=""
    >
      <div class="drawer-box">
        <ResourceList
          :resource-list="resourceList"
          :resource-list-loading="resourceListLoading"
          :allchecked="allchecked"
          :indeterminate="indeterminate"
          :select-resource-ids="selectResourceIds"
          :resource-platforms="resourcePlatforms"
          :account-belongs="accountBelongs"
          :dept-tree-list="deptTreeList"
          :query-form="queryForm"
          :default-proposer-list="defaultProposerList"
          user-select-class-name="userSelect2"
          @queryEmpty="queryEmpty"
          @queryClick="queryClick"
          @update:queryForm="updateQueryForm"
          @isChecked="isChecked"
          @updateAllSelected="updateAllSelected"
          @checkboxClick="checkboxClick"
          @createSubcribe="createSubcribe"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>
    </el-drawer>
    <div v-if="!showMobilePage" class="drawer-btn" type="primary" @click="drawer = true">
      <img :src="iconResource" alt="">
      <span class="name">资源列表</span>
    </div>
    <subcribe-list-dialog ref="subscribeListDialog" :is-show-dialog="isShowDialog" :status="status" :start-date="startDate" :end-date="endDate" @closeDialog="closeSubscribeDialog" />
    <create-subcribe-dialog ref="createSubcribeDialog" :order-platform-id="Number(queryForm.platformType)" @success="handleCreateSubscribeSucess" @openSubcribeListDialog="searchSubcribeList"/>
  </div>
</template>
<script>
import axios from 'axios';// 取消未完成请求
import SubcribeCalendar from '@/components/SubcribeCalendar';
import ResourceTag from '@/components/Subcribe/ResourceTag.vue';
import ResourceItem from '@/components/Subcribe/ResourceItem.vue';
import CalendarItem from '@/components/Subcribe/CalendarItem.vue';
import ResourceInfo from '@/components/ResourceInfo';
import SubcribeListDialog from './module/subcribe-list-dialog';
import CreateSubcribeDialog from './module/create-subcribe-dialog';
import ResourceList from './module/resource-list';

import { getList } from '@/api/resource';
import { platformList } from '@/api/select';
import { getDepartmentAll } from '@/api/config';
import { getSubcribeCalendars, getSubcribeStatistics } from '@/api/subcribe';
import { getList as getUserList } from '@/api/user';
import { mapState } from 'vuex';

// 分配颜色需要的数据
import { colors, dynamicColor } from '@/utils/ventureColorCfg';
import { getCurrentMonthLast, getCurrentMonthFirst, getCurrentZeroTime } from '@/utils';

import iconResource from '@/assets/icon-resource.png';
export default {
  name: 'Subcribe',
  components: { SubcribeCalendar, ResourceTag, ResourceItem, CalendarItem, SubcribeListDialog, CreateSubcribeDialog, ResourceList, ResourceInfo },
  data() {
    return {
      colors,
      iconResource,
      cancelTokenCalendar: null, // 用于取消请求
      cancelTokenStatistics: null,
      subscribeSearchInfo: null, // 用于预约列表搜索
      remainColors: [], // 暂存剩下的颜色
      defaultProposerList: [],
      antiShakeTime: 0, // 防抖时间
      calendarList: null,
      resourcePlatforms: [], // 平台列表
      deptTreeList: [], // 所属经营体
      accountBelongs: [], // 账号归属
      resourcePage: 1, // 资源列表翻页用
      resourcePerpage: 10, // 资源列表每页数量
      selectResourceIds: [], // 资源选择id
      tableSelectList: [], // 所有选中的数据，根据页码的一个二维数组
      subcribeStatistics: null, // 预约统计
      resourceListLoading: false,
      resourceListIsInint: true,
      drawer: false,
      timer: null,
      screenWidth: 0,
      resourceList: {
        items: [],
        page: 1,
        perPage: 10,
        total: 0,
        isInint: true
      },
      queryForm: {
        platformType: '',
        attributionMatrix: '',
        resourceName: '',
        executorId: ''
      },
      calendarArr: {
        type: 'combination',
        headStyle: {
          todayBtn: 'right',
          combination: 'center',
          checkBtn: 'right'
        },
        viewStyle: {
          day: 'right'
        },
        calendarData: []
      },
      calendarQueryForm: {
        ids: '',
        date: Date.parse(new Date())
      },
      isShowDialog: false,
      status: null,
      startDate: null,
      endDate: null,
      subcribeType: 0,
      selectOptions: [
        { value: 0, label: '全部' },
        { value: 1, label: '广告' },
        { value: 2, label: '电商' }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    allchecked() {
      var curTime = 0;
      this.resourceList.items.forEach(item => {
        if (this.selectResourceIds.indexOf(item.id) >= 0) {
          curTime++;
        }
      });
      return curTime === this.resourceList.items.length;
    },
    indeterminate() {
      var curTime = 0;
      this.resourceList.items.forEach(item => {
        if (this.selectResourceIds.indexOf(item.id) >= 0) {
          curTime++;
        }
      });
      return curTime < this.resourceList.items.length && curTime > 0;
    },
    reverseTableSelectList() {
      const list = [];
      for (var i = this.tableSelectList.length - 1; i >= 0; i--) {
        list.push(this.tableSelectList[i]);
      }
      return list;
    },
    // 屏幕宽度是否小于 1200px 如果宽度小于1200px为true
    isSmallScreen() {
      return this.screenWidth <= 1200;
      // if (this.screenWidth > 1200) {
      //   return false;
      // } else {
      //   return true;
      // }
    }
  },
  mounted() {
    const that = this;
    // 当视口的大小小于1200时，资源列表以抽屉弹窗的形式显示
    window.onresize = () => {
      return (() => {
        if (!that.timer) {
          setTimeout(function() {
            if (document.body.clientWidth > 1200) {
              that.drawer = false;
            }
            that.screenWidth = document.body.clientWidth;
            that.timer = false;
          }, 400);
        }
      })();
    };
  },
  destroyed() {
    window.onresize = null;
  },
  created() {
    // platformType， accountBelong， resourceName， executorId 为资源列表的搜索项需要记录用户最后一次搜索，采用本地缓存
    const platformType = JSON.parse(localStorage.getItem('platformType'));
    // const accountBelong = JSON.parse(localStorage.getItem('accountBelong'));
    const attributionMatrix = JSON.parse(localStorage.getItem('attributionMatrix'));
    const resourceName = JSON.parse(localStorage.getItem('resourceName'));
    const executorId = JSON.parse(localStorage.getItem('executorId'));
    this.subcribeType = Number(localStorage.getItem('subcribeType')) || 0;

    this.queryForm.platformType = platformType || '';
    // this.queryForm.accountBelong = accountBelong || '';
    this.queryForm.attributionMatrix = attributionMatrix;
    this.queryForm.resourceName = resourceName;
    if (executorId) this.queryForm.executorId = executorId;
    const that = this;
    this.getPlatformList().then((res) => {
      if (res.data && res.data.length) {
        const weChart = res.data.find(i => i.value === '微信'); // 寻找微信，目的时初始化时默认搜索微信的资源
        if (weChart && weChart.id && !this.queryForm.platformType) {
          this.queryForm.platformType = weChart.id;
        }
      }
      if (this.queryForm.executorId) {
        this.getUserInfo(this.queryForm.executorId).then(userRes => {
          that.defaultProposerList = userRes;
          that.getResourceList(true);
        });
      } else {
        that.getResourceList(true);
      }
    }).catch(() => {
      that.getResourceList(true);
    });
    // this.getAccountBelongList();
    this.queryDeptTreeList();
    this.screenWidth = document.body.clientWidth;
    this.pageFilter();
  },
  beforeRouteLeave(to, from, next) {
    // 离开页面时缓存状态
    localStorage.setItem('platformType', JSON.stringify(this.queryForm.platformType));
    // localStorage.setItem('accountBelong', JSON.stringify(this.queryForm.accountBelong));
    localStorage.setItem('resourceName', JSON.stringify(this.queryForm.resourceName));
    localStorage.setItem('attributionMatrix', JSON.stringify(this.queryForm.attributionMatrix));
    localStorage.setItem('executorId', JSON.stringify(this.queryForm.executorId));
    localStorage.setItem('tableSelectList', JSON.stringify(this.tableSelectList));
    next(); // 一定不要忘记写
  },
  methods: {
    pageFilter() { // 首页跳转弹窗预约弹窗并搜索
      if (this.$route.query.status !== undefined) {
        this.isShowDialog = true;
        this.status = Number(this.$route.query.status);
        this.startDate = Number(this.$route.query.firstDate);
        this.endDate = Number(this.$route.query.endDate);
      } else {
        this.isShowDialog = false;
        this.status = null;
        this.startDate = null;
        this.endDate = null;
      }
    },
    // 获取用户信息 用于获取具体用户的信息
    async getUserInfo(id) {
      const params = {
        userId: id
      };
      const res = await getUserList(1, 1, params);
      if (res.code === 200 && res.data.items.length > 0) {
        return res.data.items;
      }
      return [];
    },
    clearSelectResourceList() { // 一键清除所选资源
      this.selectResourceIds = [];
      this.tableSelectList = [];
      this.getCalendarSubcribe();
      this.getCalendarStatistics();
    },
    // 更新queryForm
    updateQueryForm({ queryForm, isSearch }) { // 当资源列表触发搜索时候的调用
      this.queryForm = queryForm;
      if (isSearch) {
        this.queryClick();
      }
    },
    resourceNameBlur() {
      const str = this.queryForm.resourceName.replace(/(^\s*)|(\s*$)/g, '');
      this.queryForm.resourceName = str;
    },
    // 弹窗相关代码
    closeSubscribeDialog(isEdit) {
      // 列表关闭的时候 刷新一下数据 可优化
      if (isEdit) {
        this.getCalendarSubcribe();
        this.getCalendarStatistics();
      }
    },
    searchSubcribeList(val) {
      this.subscribeSearchInfo = null;
      const timestamp = this.calendarQueryForm.date;
      const firstDate = (val.dateTime ? val.dateTime[0] : null) || getCurrentMonthFirst(timestamp);
      const lastDate = (val.dateTime ? val.dateTime[1] : null) || getCurrentMonthLast(timestamp);
      this.$refs.subscribeListDialog.setInitData([], [firstDate, lastDate], false, val.resourceName);
      this.$refs.subscribeListDialog.dialogVisible = true;
    },
    searchPersonSubcribeList() {
      this.subscribeSearchInfo = null;
      const timestamp = this.calendarQueryForm.date;
      const firstDate = getCurrentMonthFirst(timestamp);
      const lastDate = getCurrentMonthLast(timestamp);
      this.$refs.subscribeListDialog.setInitData([], [firstDate, lastDate], true);
      this.$refs.subscribeListDialog.dialogVisible = true;
    },
    checkSubList(time) {
      this.$refs.subscribeListDialog.setInitData(this.selectResourceIds, [getCurrentZeroTime(time), getCurrentZeroTime(time, 1)]);
      this.$refs.subscribeListDialog.dialogVisible = true;
    },
    // 创建预约
    createSubcribe(item) {
      this.$refs.createSubcribeDialog.dialogVisible = true;
      this.$refs.createSubcribeDialog.info = item;
      this.$refs.createSubcribeDialog.platformType = this.queryForm.platformType;
    },
    handleCreateSubscribeSucess(item) {
      if (this.selectResourceIds.indexOf(item.id) >= 0 || this.selectResourceIds.length === 0) {
        this.getCalendarSubcribe();
        this.getCalendarStatistics();
      }
    },
    // 资源列表是否选中逻辑
    renderHeader(h, { column, $index }) {
      return h('span', {}, [
        h('el-checkbox', {
          props: {
            value: this.allchecked,
            indeterminate: this.indeterminate
          },
          on: {
            change: this.updateAllSelected
          },
          style: {
            display: this.resourceList.items.length > 0 ? 'block' : 'none'
          }
        })
      ]);
    },
    // 判断是否超过10位数 如果超过只取后10位
    cutResourceList() {
      if (this.selectResourceIds.length > 10) {
        // const length = this.selectResourceIds.length;
        const tempIds = [...this.selectResourceIds];
        this.selectResourceIds = this.selectResourceIds.slice(-15);
        this.tableSelectList = this.tableSelectList.slice(-15);
        const remainIds = this.getDiffResourceIds(tempIds, this.selectResourceIds);
        this.deleteDynamicColor(remainIds);
      }
    },
    // 获取两数组差异项
    getDiffResourceIds(totalArr, cutArr) {
      const result = [];
      totalArr.forEach(item => {
        if (cutArr.indexOf(item) < 0) {
          result.push(item);
        }
      });
      return result;
    },
    // 判断资源列表是否全选，执针对当前页
    updateAllSelected(e) {
      if (e) {
        this.resourceList.items.forEach((item, index) => {
          if (this.selectResourceIds.indexOf(item.id) < 0) {
            this.selectResourceIds.push(item.id);
            this.tableSelectList.push(item);
          }
        });
        this.cutResourceList();
        this.afreshColor();
      } else {
        this.resourceList.items.forEach((item, index) => {
          const curIndex = this.selectResourceIds.indexOf(item.id);
          if (curIndex >= 0) {
            const remainIds = this.selectResourceIds.splice(curIndex, 1);
            this.tableSelectList.splice(curIndex, 1);
            this.deleteDynamicColor(remainIds);
          }
        });
      }
      this.getCalendarSubcribe();
      this.getCalendarStatistics();
    },
    // 资源列表复选框点击时候的调用
    checkboxClick({ ischeck, item }) {
      const curIndex = this.selectResourceIds.indexOf(item.id);
      if (ischeck) {
        if (curIndex < 0) {
          this.selectResourceIds.push(item.id);
          this.tableSelectList.push(item);
          if (this.selectResourceIds.length > 15) {
            this.tableSelectList.splice(0, 1);
            const remainIds = this.selectResourceIds.splice(0, 1);
            this.deleteDynamicColor(remainIds);
          }
          this.afreshColor();
        }
      } else {
        let remainIds;
        if (curIndex >= 0) {
          remainIds = this.selectResourceIds.splice(curIndex, 1);
          this.tableSelectList.splice(curIndex, 1);
          this.deleteDynamicColor(remainIds);
        }
      }
      this.getCalendarSubcribe();
      this.getCalendarStatistics();
    },
    // 所选资源标签删除时候的处理逻辑
    handleResourceClose(tag) {
      const curIndex = this.selectResourceIds.indexOf(tag.id);
      let remainIds;
      if (curIndex >= 0) {
        remainIds = this.selectResourceIds.splice(curIndex, 1);
        this.tableSelectList.splice(curIndex, 1);
      }
      this.deleteDynamicColor(remainIds);
      this.getCalendarSubcribe();
      this.getCalendarStatistics();
    },
    initSelectResourceIds(items) {
      // 当初始数据小于颜色数的话需要 提前设置 剩余颜色remainColors
      if (this.colors.length > items.length) {
        const remainCut = this.colors.length - items.length;
        this.remainColors = this.colors.slice(-remainCut);
      }
      items.forEach((item, index) => {
        this.selectResourceIds.push(item.id);
        this.tableSelectList.push(item);
        dynamicColor[item.id] = this.colors[index];
      });
    },
    // 删除色板到中未使用到的颜色逻辑
    deleteDynamicColor(remainIds) {
      // 删除dynamicColor中不使用的颜色并加入到 遗留颜色数组中
      remainIds.forEach((item, index) => {
        if (item in dynamicColor) {
          this.remainColors.push(dynamicColor[item]);
          delete dynamicColor[item];
        }
      });
    },
    // 删除元素后重新分配颜色逻辑
    afreshColor() {
      this.selectResourceIds.forEach((item, index) => {
        if (!(item in dynamicColor) && this.remainColors.length > 0) {
          dynamicColor[item] = this.remainColors[0];
          this.remainColors.splice(0, 1);
        }
      });
    },
    // 是否选中
    isChecked(id) {
      return this.selectResourceIds.indexOf(id) >= 0;
    },
    // 当calendarList为空的时候使用
    getCalendarItem(day) {
      if (!this.calendarList) return [];
      if (day in this.calendarList) {
        return this.calendarList[day];
      } else {
        return [];
      }
    },
    // 获取资源列表
    getResourceList(reset = false) {
      if (reset) this.resourcePage = 1;
      this.resourceListLoading = true;
      const params = { ...this.queryForm };
      getList(this.resourcePage, this.resourcePerpage, params).then(
        res => {
          if (res.code === 200) {
            this.resourceList = res.data;

            if (this.resourceListIsInint) {
              if (this.resourceList.items.length > 0) {
                const tableSelectList = JSON.parse(localStorage.getItem('tableSelectList'));
                let selects = [];
                if (tableSelectList && tableSelectList.length > 0) {
                  selects = tableSelectList;
                } else {
                  // selects = res.data.items;
                }
                this.initSelectResourceIds(selects);
                this.getCalendarSubcribe();
                this.getCalendarStatistics();
              }
            }
          }
          this.resourceListIsInint = false;
          this.resourceListLoading = false;
        },
        result => {
          this.resourceListLoading = false;
        }
      );
    },
    // 获取平台列表
    getPlatformList() {
      return new Promise((resolve, reject) => {
        platformList().then(res => {
          if (res.code === 200) {
            this.resourcePlatforms = res.data;
            resolve(res);
          } else {
            reject(res.message);
          }
        }).catch(err => {
          reject(err);
        });
      });
    },
    // 获取账号归属列表
    // getAccountBelongList(accountName = '') {
    //   getAccountBelong(accountName).then(res => {
    //     if (res.code === 200) {
    //       this.accountBelongs = res.data;
    //     }
    //   });
    // },
    // 获取部门列表
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    handleSizeChange(val) {
      this.resourcePerpage = val;
      this.getResourceList(true);
    },
    handleCurrentChange(toPage) {
      this.resourcePage = toPage;
      this.getResourceList();
    },
    resetList(time) {
      this.calendarQueryForm.date = time;
      this.getCalendarSubcribe();
      this.getCalendarStatistics();
    },
    // 日历日期切换后的处理逻辑
    handleSomeDay(time) {
      this.resetList(time);
    },
    // 日历组件时间切换处理
    handlePickDate(time) {
      this.resetList(time);
    },
    handleToday(time) {
      this.resetList(time);
    },
    typeChange(value) {
      localStorage.setItem('subcribeType', value);
      this.getCalendarSubcribe();
    },
    // 获取日历状 预约数据
    getCalendarSubcribe() {
      if (this.cancelTokenCalendar) this.cancelTokenCalendar.cancel('cancel');
      const source = axios.CancelToken.source();// 用于取消请求
      this.cancelTokenCalendar = source;
      const ids = this.selectResourceIds.join(',');
      const date = this.calendarQueryForm.date;
      const type = this.subcribeType;
      const params = { ids, date, type };
      this.calendarList = {};
      getSubcribeCalendars(params, source.token).then(res => {
        if (res.code === 200) {
          if (res.data) {
            this.calendarList = res.data;
          }
        }
      });
    },
    // 获取日历统计接口
    getCalendarStatistics() {
      if (this.cancelTokenStatistics) this.cancelTokenStatistics.cancel('cancel');
      const source = axios.CancelToken.source();// 用于取消请求
      this.cancelTokenStatistics = source;
      const ids = this.selectResourceIds.join(',');
      const date = this.calendarQueryForm.date;
      const params = { ids, date };
      getSubcribeStatistics(params, source.token).then(res => {
        if (res.code === 200) {
          this.subcribeStatistics = res.data;
        }
      });
    },
    queryClick() {
      this.getResourceList(true);
      if (this.isSmallScreen && !this.drawer) {
        this.drawer = true;
      }
    },
    queryEmpty() {
      this.queryForm.platformType = '';
      // this.queryForm.accountBelong = '';
      this.queryForm.attributionMatrix = '';
      this.queryForm.resourceName = '';
      this.queryForm.executorId = '';
      this.getResourceList(true);
      if (this.isSmallScreen && !this.drawer) {
        this.drawer = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  .select-font{
    font-size: 14px!important;
  }
  .custom, .ad{
    border-radius: 50%;
  }
  .custom{
    background: #FD8546;
  }
  .ad{
    background: #406EFF;
  }
  .subscribe-header {
    .header-form {
      // margin-bottom: 16px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      &::v-deep {
        .el-input__icon {
          line-height: 32px;
        }
      }
    }
    .person-btn{
      color:#406EFF;
      border: 1px solid #406EFF;
    }
    .btn-wrap{
      &::v-deep {
        .el-button{
          width: 80px;
          height: 32px;
          padding: 0;
          font-size: 14px;
          &.clear-btn {
            width: 56px;
          }
        }
      }
    }
    .at-present {
      display: flex;
      .present-label {
        padding-top: 14px ;
        margin-bottom: 12px;
        color: #999999;
        font-size: 14px;
        &.other-color {
          color: #333333;
        }
      }
      .resource-tag-wrap {
        margin-right: 12px;
      }
      .present-content {
        flex: 1;
        margin-left: 10px;
        padding: 11px 12px 0 11px;
        min-height: 48px;
      }
    }
  }
  .list-empty {
    height: 60px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .subcribe {
    margin: 20px;
    // margin: 24px 0px 32px 0px;
    display: flex;
    &.is-mobile {
      flex-direction: column;
    }
    .subcribe-right {
      background-color: #fff;
      padding: 25px 22px 10px 22px;
      &.mobile-subscribe-right {
        margin: 8px 0 0 0 !important;
        padding: 12px !important;
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
      }
    }
    .subcribe-container {
      flex: 1;
      border-radius: 8px;
    }
    .subcribe-left {
      display: flex;
      flex-direction: column;
      flex: 1;
      background-color: #fff;
      min-width: 750px;
      padding: 20px 24px;
    }
    .subcribe-right {
      display: flex;
      flex-direction: column;
      width: 23%;
      min-width: 295px;
      max-width: 400px;
      margin-left: 17px;
      padding: 20px 24px;
    }
  }
  .drawer-box {
    position: relative;
    display: none;
    // height: 100%;
    flex-direction: column;
    padding: 25px 22px 10px 22px;
    padding-bottom: 60px;
    min-width: 270px;
    .pagination-box {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 100%;
      transform: translateX(-50%);
    }
  }
  .drawer-btn {
    display: none;
    position: fixed;
    cursor: pointer;
    right: 80px;
    bottom: 70px;
    z-index: 2;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    width:105px;
    height:34px;
    line-height: 34px;
    background:rgba(255,255,255,1);
    box-shadow:1px 2px 5px 0px rgba(221,225,234,1);
    border-radius:17px;
    img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
    .name {
      font-size: 14px;
      color: #406EFF;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
    }
  }
  @media screen and (max-width: 1200px) {
    .subcribe {
      margin: 14px 14px 14px 14px;
      .subcribe-right:not(.mobile-subscribe-right) {
        display: none;
      }
    }
    .drawer-box {
      display: flex;
    }
    .drawer-btn {
      display: flex;
    }
  }
}
.option-item {
  width: 8px;
  height: 8px;
  margin-right: 6px
}
.mobile-subscribe {
  .subcribe {
    margin: 0 !important;
  }
  &::v-deep {
    .data-box {
      @include scrollBar($x: auto, $y: hidden);
    }
    .calendar-header {
      display: block !important;
      border: none !important;
      padding: 0 !important;
      .calendar-box {
        margin: 0 !important;
      }
      .calendar-content {
        margin-top: 5px;
        justify-content: center;
      }
    }
  }

  .subcribe-left {
    padding: 12px !important;
    min-width: 100% !important;
    width: 100% !important;
  }
}
</style>
<style lang="scss">
.el-select-dropdown__item{
  font-size: 14px;
}
.subscribe-list-wrap {
  .el-drawer__body {
    overflow: auto;
  }
  .el-select>.el-input{
    font-size: 14px;
  }
  .resource-color {
    margin-right: 6px;
    // background: #31CC9C;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
}
.subcribe, .drawer-box, .subscribe-header  {
  .el-drawer__body {
    overflow: auto;
  }
  .el-table__row {
    td:first-child {
      .cell {
        padding-right: 0px;
      }
    }
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-form-item {
    margin-bottom: 16px;
    margin-right: 0;
    display: flex;
    .el-form-item__label {
      white-space: nowrap;
    }
  }
  .el-table__empty-block {
    width: 100% !important;
  }
  .has-search-btn-input {
    .el-input__inner {
      // padding-right: 35px;
      line-height: 32px;
      width: 100%;
      font-size: 14px !important;
    }
  }
  .el-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: pre-wrap;
    .el-pager {
      text-align: center;
    }
    .btn-prev, .btn-next {
      background: #fff;
      border: 1px solid #EDEEF8;
    }
    &.is-background .el-pager li:not(.disabled).active {
      background: #fff;
      color: #333333;
    }
    &.is-background.el-pagination--small .el-pager li {
      background: #fff;
      color: #A9AFB6;
    }
  }
}
</style>
